<template>
    <div class="city">
        <city-header></city-header>
        <city-search :cities="cities"></city-search>
        <city-list :cities="cities" :hotCities="hotCities" :cityWord="cityWord"></city-list>
        <city-alphabet :cities="cities" @changeCityItem="changeCityItem"></city-alphabet>
    </div>
</template>

<script>
  import { reqCityList } from '../ajax'
  
  import CityHeader from '../components/CityHeader'
  import CitySearch from '../components/CitySearch'
  import CityList from '../components/city-list'
  import CityAlphabet from '../components/Alphabet'
  
  export default {
    name: 'City',
    components: {
      CityHeader,
      CitySearch,
      CityList,
      CityAlphabet,
    },
    data () {
      return {
        hotCities: [], // 热门城市列表
        cities: {},   // 城市列表
        cityWord: '', // 当前城市英文字母信号
      }
    },
    beforeMount () {
      // 发送ajax获取城市列表
      this.getCityList()
    },
    methods: {
      async getCityList () {
        // ajax请求json 城市列表 和 热门城市
        let {data} = await reqCityList()
        data = data.data
        console.log(data)
        // 将请求回来的数据保存到data状态中
        this.cities = data.cities
        this.hotCities = data.hotCities
        
      },
      changeCityItem (cityWord) {
        this.cityWord = cityWord
      },
    },
  }
</script>

<style scoped>

</style>